﻿@page "/radio"

<div class="container-fluid">

    <MatH5>Gender</MatH5>
    <MatRadioGroup @bind-Value="@Val1" TValue="string">
        <MatRadioButton Value="@string.Empty" TValue="string">Default</MatRadioButton>
        <MatRadioButton Value="@("f")" Label="Female" TValue="string"></MatRadioButton>
        <MatRadioButton Value="@("m")" TValue="string">Male</MatRadioButton>
        <MatRadioButton Value="@("d")" Disabled="true" TValue="string">Disabled</MatRadioButton>
    </MatRadioGroup>
    <div>
        <b>Selected value: </b>
        <b>@Val1</b>
        <MatButton OnClick="@((e) => { Val1 = "m"; })">Set Male</MatButton>
    </div>

    <h3>Items: @Val3</h3>
    <MatRadioGroup @bind-Value="@Val3" Items="@Val3Items">
    </MatRadioGroup>

    <h3>Items with ItemTemplate: @Val3</h3>
    <MatRadioGroup @bind-Value="@Val3" Items="@Val3Items">
        <ItemTemplate>
            <div>
                <MatIcon>@MatIconNames.Arrow_forward</MatIcon>
                <MatRadioButton Value="@context">@context</MatRadioButton>
            </div>
        </ItemTemplate>
    </MatRadioGroup>
</div>

@code
        {

    protected string Val1;

    protected string Val3;

    protected string[] Val3Items =
    {
                "Winter",
                "Spring",
                "Summer",
                "Autumn"
            };

}

